<template>
    <div >
        <h2>登录表单</h2>
        <form @submit.prevent="handelLogin" >
            <input v-model="loginForm.username" type="text" placeholder="用户名" required />
            <input v-model="loginForm.password" type="password" placeholder="密码" required />
            <button type="submit">登录</button>
        </form>
        <p v-if="user.isLogin">欢迎你，{{ user.username }}</p>
        <button @click="logout">登出</button>

        <hr>
       <p> 鼠标的坐标：{{ x }},{{ y }}</p>
    </div>
</template>



<script setup>
import { ref } from 'vue';
import { useAuth } from './utils/useAuth.js';
import { useMouse } from './utils/useMouse.js';

// 使用useAuth可组合函数
const {user,login,logout} =useAuth()

// 使用useMouse可组合函数
const {x,y}=useMouse()


const loginForm=ref({
    username:'',
    password:''
})

// 处理登录逻辑
const handelLogin=()=>{
    if(loginForm.value.password==='123'){
        login('val-token',loginForm.value.username)
    }else{
        alert('密码错误！')
    }
}

</script>



<style scoped></style>